import Vue from 'vue'
import Vuex from 'vuex'
import headerRecord from "./headerRecord";

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        //全局变量
        isCollapse: false,//菜单是否折叠
        menuArr:[],//点击菜单时显示在头组件的每个标签的集合
        labelIndex: 0,//头组件的标签的索引

    },
    /*
       getters对象包含了一系列的计算属性，这些计算属性是基于state中的值来派生的。
       它们可以被组件用来获取经过处理或转换的状态值。
       asideWidth getter根据isCollapse的状态返回不同的侧边栏宽度值。
       asideTitle getter同样根据isCollapse的状态返回不同的标题文本。
       注意，在getter函数中，s参数代表了store的state对象，这是Vuex自动注入的。*/
    getters: {
        asideWidth(s) {
            return s.isCollapse ? '58px' : '250px'
        },
        asideTitle(s) {
            return s.isCollapse ? '优赞' : '优赞互动管理系统'
        },
        headerIcon(s) {
            return s.isCollapse ? '放大' : '缩小'
        },

    },
    mutations: {
        //点击切换菜单折叠状态
        changeIsCollapse(s) {
            s.isCollapse = !s.isCollapse
        },
        //改变菜单数组的方法
        changeMenuArr(s,route) {
             s.menuArr.push(s,{
                 title:route.meta.title,
                 name:route.path,
                 content:route.meta.title,
             })//每点击新添路由
        },
        changeTabIndex(s,index){
            s.editableTabsValue=index
            console.log('s.editableTabsValue',s.editableTabsValue)

        },


    },
    actions: {
        // asyncMenuArr(store,parameter){
        //     store.commit('changeMenuArr',parameter)
        // },

    },

    modules: {
        //子模块名称
        headerRecord,

    }
})
